<template>
  <div class="container">
    <div class="cards-row">
      <!-- 左侧角色列表卡片 -->
      <a-card class="general-card">
        <template #title>角色列表</template>
        <template #extra>
          <a-button type="primary" @click="handleAddRole">
            <template #icon><icon-plus /></template>
            添加角色
          </a-button>
        </template>
        
        <div class="role-list">
          <a-list :data="roles" :bordered="false">
            <template #empty>
              <div class="empty-wrapper">
                <a-empty />
              </div>
            </template>
            <a-list-item 
              v-for="role in roles" 
              :key="role.id"
              :class="{'active-role': currentRole && currentRole.id === role.id}"
              @click="handleSelectRole(role)"
            >
              <div class="role-item">
                <div class="role-info">
                  <span class="role-name">{{ role.name }}</span>
                  <a-tag :color="role.status === 1 ? 'green' : 'red'" size="small">
                    {{ role.status === 1 ? '启用' : '禁用' }}
                  </a-tag>
                </div>
                <div class="role-actions">
                  <a-button type="text" size="mini" @click.stop="handleEditRole(role)" :disabled="isAdminRoleById(role.id)">
                    <template #icon><icon-edit /></template>
                  </a-button>
                  <a-popconfirm
                    content="确定要删除这个角色吗？"
                    @ok="handleDeleteRoleConfirm(role)"
                    :disabled="isAdminRoleById(role.id)"
                  >
                    <a-button type="text" size="mini" status="danger" @click.stop :disabled="isAdminRoleById(role.id)">
                      <template #icon><icon-delete /></template>
                    </a-button>
                  </a-popconfirm>
                </div>
              </div>
            </a-list-item>
          </a-list>
        </div>
      </a-card>

      <!-- 右侧权限配置卡片 -->
      <a-card class="general-card">
        <template #title>
          <span>菜单权限配置</span>
          <a-tag v-if="currentRole" style="margin-left: 8px">{{ currentRole.name }}</a-tag>
        </template>
        <template #extra>
          <a-space>
            <a-button 
              type="primary" 
              @click="handleSavePermissions"
              :disabled="isAdminRole"
            >
              <template #icon><icon-save /></template>
              保存配置
            </a-button>
            <a-button 
              type="outline" 
              @click="refreshMenuTree"
              :loading="loading"
            >
              <template #icon><icon-refresh /></template>
              刷新
            </a-button>
          </a-space>
        </template>

        <div v-if="!currentRole" class="empty-wrapper">
          <a-empty description="请选择左侧角色以配置权限" />
        </div>
        <div v-else class="permissions-container">
          <a-alert v-if="isAdminRole" type="warning" class="permission-alert">
            管理员角色默认拥有全部权限，无法修改权限配置
          </a-alert>
          <a-alert v-else type="info" class="permission-alert">
            当前正在为角色{{ currentRole.name }}配置权限，请勾选需要分配的菜单权限
          </a-alert>
          
          <!-- Arco Design树组件 -->
          <div class="menu-tree-container" v-if="false">
            <a-tree
              :data="menuTree"
              :checkable="!isAdminRole"
              v-model:checked-keys="checkedKeys"
              :default-expand-all="true"
              @check="handleCheckChange"
            >
            </a-tree>
          </div>
          
          <!-- 备选方案：手动渲染菜单树 -->
          <div class="custom-menu-tree" v-if="true">
            <div v-for="(menu, index) in menuTree" :key="menu.key" class="menu-item parent-menu">
              <div class="menu-row">
                <a-checkbox 
                  :model-value="checkedKeys.includes(menu.key)"
                  @update:model-value="(checked) => handleCustomCheck(menu.key, checked)"
                  :disabled="isAdminRole"
                >
                  {{ menu.title }}
                </a-checkbox>
              </div>
              
              <div class="submenu-container" v-if="menu.children && menu.children.length > 0">
                <div v-for="child in menu.children" :key="child.key" class="menu-item child-menu">
                  <div class="menu-row">
                    <a-checkbox 
                      :model-value="checkedKeys.includes(child.key)"
                      @update:model-value="(checked) => handleCustomCheck(child.key, checked)"
                      :disabled="isAdminRole"
                    >
                      {{ child.title }}
                    </a-checkbox>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-card>
    </div>

    <!-- 角色表单弹窗 -->
    <a-modal
      v-model:visible="roleModalVisible"
      :title="modalTitle"
      @cancel="closeRoleModal"
      @before-ok="handleSubmitRole"
      :unmount-on-close="false"
    >
      <a-form
        :model="roleForm"
        layout="vertical"
      >
        <a-form-item field="name" label="角色名称" required>
          <a-input v-model="roleForm.name" placeholder="请输入角色名称" />
        </a-form-item>
        <a-form-item field="code" label="角色标识" required>
          <a-input v-model="roleForm.code" placeholder="请输入角色标识，如admin" />
        </a-form-item>
        <a-form-item field="status" label="状态">
          <a-radio-group v-model="roleForm.status" type="button">
            <a-radio :value="1">启用</a-radio>
            <a-radio :value="0">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="description" label="角色描述">
          <a-textarea 
            v-model="roleForm.description" 
            placeholder="请输入角色描述"
            :auto-size="{ minRows: 2, maxRows: 3 }"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, defineComponent, watch } from 'vue';
import { Message } from '@arco-design/web-vue';
import { 
  IconEdit, 
  IconDelete, 
  IconInfoCircle,
  IconPlus,
  IconSave,
  IconRefresh
} from '@arco-design/web-vue/es/icon';
import { useRoleStore } from '@/stores/role';
import { usePermissionStore } from '@/stores/permission';
import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia';
import menuApi from '@/api/menu';
import { asyncRoutes } from '@/router/asyncRoutes';
import request from '@/utils/http';

// 定义组件名称
defineComponent({
  name: 'RoleCfg'
});

// 获取角色store
const roleStore = useRoleStore();
// 获取权限store
const permissionStore = usePermissionStore();
// 获取用户store
const userStore = useUserStore();

// 使用storeToRefs获取响应式状态
const { roles } = storeToRefs(roleStore);
const roleLoading = ref(false); // 本地维护loading状态，避免直接从store读取
const permissionLoading = ref(false); // 本地维护loading状态，避免直接从store读取

// 监听store加载状态变化，但使用本地状态
watch(() => roleStore.loading, (newVal) => {
  roleLoading.value = newVal;
}, { immediate: true });

watch(() => permissionStore.loading, (newVal) => {
  permissionLoading.value = newVal || false;
}, { immediate: true });

// 定义组件状态
// 当前选中的角色，初始为null
const currentRole = ref(null);
// 菜单树数据
const menuTree = ref([]);
// ID 到 Key 的映射
const idToKeyMap = ref(new Map());
// Key 到 ID 的映射
const keyToIdMap = ref(new Map());
// 选中的菜单权限
const checkedKeys = ref([]);
// 定义本地loading状态用于手动控制
const localLoading = ref(false);
// 合并loading状态为计算属性，表示全局加载状态
const loading = computed(() => {
  // 安全访问，防止undefined.value错误
  const rLoading = roleLoading?.value ?? false;
  const pLoading = permissionLoading?.value ?? false;
  const lLoading = localLoading.value;
  return rLoading || pLoading || lLoading;
});

// 监听选中键的变化
watch(checkedKeys, (newVal) => {
  console.log('选中的键已更新:', newVal);
}, { deep: true });

// --- 菜单树操作辅助函数 ---

// 根据 key 查找菜单节点及其父节点路径
const findNodeAndParents = (tree, key) => {
  let node = null;
  const parents = [];
  
  function traverse(nodes, currentParents) {
    if (node) return true; // 已找到
    for (const item of nodes) {
      const currentPath = [...currentParents, item];
      if (item.key === key) {
        node = item;
        parents.push(...currentParents); // 不包含自身
        return true;
      }
      if (item.children && item.children.length > 0) {
        if (traverse(item.children, currentPath)) {
          return true;
        }
      }
    }
    return false;
  }
  
  traverse(tree, []);
  return { node, parents };
};

// 获取节点及其所有后代节点的 key
const getNodeAndDescendantKeys = (node) => {
  const keys = [node.key];
  if (node.children && node.children.length > 0) {
    node.children.forEach(child => {
      keys.push(...getNodeAndDescendantKeys(child));
    });
  }
  return keys;
};

// --- 结束辅助函数 ---

// 获取所有菜单的key
function getAllMenuKeys(tree) {
  const keys = [];
  
  // 递归收集所有节点的key
  const collectKeys = (nodes) => {
    if (!nodes) return;
    nodes.forEach(node => {
      if (node.key) keys.push(node.key);
      if (node.children && node.children.length > 0) {
        collectKeys(node.children);
      }
    });
  };
  
  collectKeys(tree);
  return keys;
}

// 获取所有菜单数据
async function fetchAllMenus() {
  try {
    localLoading.value = true;
    console.log('开始生成菜单树...');
    
    // 使用更完整的静态菜单树数据结构，包含asyncRoutes.js中的所有非隐藏菜单
    // !!! 重要：这里的 id 值是根据日志猜测的，你需要根据后端实际的 Menu ID 进行核对和修改 !!!
    const staticMenuTree = [
      // 1. 仪表盘 (假设 ID: 1, 2, 3)
      {
        id: 1, // 假设 Dashboard 的 ID 是 1
        key: 'Dashboard',
        title: '仪表盘',
        children: [
          { id: 2, key: 'Workbench', title: '工作台' }, // 假设 Workbench ID 是 2
          { id: 3, key: 'Report', title: '统计报表' }    // 假设 Report ID 是 3
        ]
      },
      // 2. 权限管理 (假设 ID: 4, 5, 6)
      {
        id: 4, // 假设 User ID 是 4
        key: 'User',
        title: '权限管理',
        children: [
          { id: 5, key: 'UserMgmt', title: '用户管理' }, // 假设 UserMgmt ID 是 5
          { id: 6, key: 'RoleCfg', title: '角色管理' }   // 假设 RoleCfg ID 是 6
        ]
      },
      // 3. 基础设置 (假设 ID: 7-13)
      {
        id: 7, // 假设 BasicSettings ID 是 7
        key: 'BasicSettings',
        title: '基础设置',
        children: [
          { id: 8, key: 'CargoInfo', title: '货物信息' },
          { id: 9, key: 'CargoCategoryMgmt', title: '货物分类' },
          { id: 10, key: 'SupplierProfile', title: '供应商资料' },
          { id: 11, key: 'CustomerProfile', title: '客户资料' },
          { id: 12, key: 'Logistics', title: '物流管理' },
          { id: 13, key: 'WarehouseManagement', title: '仓库管理' },
          { id: 14, key: 'LocationManagement', title: '库位管理' }
        ]
      },
      // 4. 库存管理 (假设 ID: 15, 16, 17, 18) - 日志中有 15, 16, 17, 18
      {
        id: 15, // 假设 Inventory ID 是 15
        key: 'Inventory',
        title: '库存管理',
        children: [
          { id: 16, key: 'InventoryQuery', title: '库存查询' },    // 假设 InventoryQuery ID 是 16
          { id: 17, key: 'InventoryAlerts', title: '库存预警' },   // 假设 InventoryAlerts ID 是 17
          { id: 18, key: 'InventoryCount', title: '库存盘点' }     // 假设 InventoryCount ID 是 18
        ]
      },
      // 5. 入库管理 (假设 ID: 19, 20) - 日志中有 19, 20
      {
        id: 19, // 假设 Inbound ID 是 19
        key: 'Inbound',
        title: '入库管理',
        children: [
          { id: 20, key: 'InboundOrderList', title: '入库单列表' } // 假设 InboundOrderList ID 是 20
        ]
      },
      // 6. 出库管理 (假设 ID: 21, 22) - 日志中有 21, 22
      {
        id: 21, // 假设 Outbound ID 是 21
        key: 'Outbound',
        title: '出库管理',
        children: [
          { id: 22, key: 'OutboundOrderList', title: '出库单列表' } // 假设 OutboundOrderList ID 是 22
        ]
      },
      // 7. 关于系统 (假设 ID: 23, 24, 25) - 日志中有 23, 24, 25
      {
        id: 23, // 假设 About ID 是 23
        key: 'About',
        title: '关于系统',
        children: [
          { id: 24, key: 'SystemInfo', title: '系统信息' },  // 假设 SystemInfo ID 是 24
          { id: 25, key: 'SystemLog', title: '系统日志' }   // 假设 SystemLog ID 是 25
        ]
      }
    ];
    
    // 直接使用静态菜单树
    menuTree.value = staticMenuTree;
    
    // 创建 ID 到 Key 的映射
    const tempMap = new Map();
    const buildMap = (nodes) => {
      if (!nodes) return;
      nodes.forEach(node => {
        if (node.id !== undefined && node.key !== undefined) {
          tempMap.set(node.id, node.key);
          // 也添加字符串ID到Key的映射，以防万一API返回字符串ID
          tempMap.set(String(node.id), node.key);
        }
        if (node.children && node.children.length > 0) {
          buildMap(node.children);
        }
      });
    };
    buildMap(menuTree.value);
    idToKeyMap.value = tempMap;
    
    // 创建 Key 到 ID 的反向映射
    const reverseMap = new Map();
    for (const [id, key] of tempMap.entries()) {
      // 我们优先使用数字ID作为 Map 的 Key，但 Map 的 Value 是字符串 Key
      // 所以反向映射是 字符串Key -> 数字ID
      // 但要处理 tempMap 中同时存了数字和字符串ID的情况，只存Key到数字ID的映射
      if (typeof id === 'number') { 
        reverseMap.set(key, id);
      }
    }
    keyToIdMap.value = reverseMap;
    
    console.log('ID到Key的映射创建完成:', idToKeyMap.value);
    console.log('Key到ID的映射创建完成:', keyToIdMap.value);
    
    // 详细调试日志
    console.log('菜单树数据生成完成，详细信息:');
    console.log('菜单树长度:', staticMenuTree.length);
    staticMenuTree.forEach((item, index) => {
      console.log(`[${index}] 父菜单: key=${item.key}, title=${item.title}, 子菜单数量=${item.children ? item.children.length : 0}`);
      if (item.children && item.children.length > 0) {
        item.children.forEach((child, childIndex) => {
          console.log(`  - [${childIndex}] 子菜单: key=${child.key}, title=${child.title}`);
        });
      }
    });
    
    return staticMenuTree;
  } catch (error) {
    console.error('获取菜单列表失败:', error);
    Message.error('获取菜单列表失败: ' + (error.message || '未知错误'));
    
    // 出错时返回空数组
    menuTree.value = [];
    return [];
  } finally {
    localLoading.value = false;
  }
}

// 处理权限复选框选中状态变化
function handleCheckChange(checkedKeys, { checked, checkedNodes, node, halfCheckedKeys }) {
  // 确保node和node.key存在
  if (!node || node.key === undefined) {
    console.error('权限树选中状态变化事件中node对象不完整:', node);
    return;
  }
  
  console.log('权限树选中状态变化:', {
    checkedKeys,
    checked,
    node: node.key,
    halfCheckedKeys
  });
  
  // 如果是管理员角色，不应该允许修改权限
  if (isAdminRole.value) {
    Message.warning('管理员角色默认拥有全部权限，无法修改');
    
    // 使用nextTick重置选中状态，而不是直接修改参数
    // setTimeout(() => {
    //   const allKeys = getAllMenuKeys(menuTree.value);
    //   checkedKeys.value = allKeys;
    // }, 0);
    
    // 我们需要在模板中阻止修改admin角色的权限，而不是在这里尝试修复
    return;
  }
  
  // 这里不需要手动修改checkedKeys，因为v-model:checked-keys已经自动处理
  console.log('当前选中的权限:', checkedKeys.value);
}

// 角色表单数据
const roleForm = reactive({
  id: null,
  name: '',
  code: '',
  status: 1,
  description: '',
  sort: 0
});

// 弹窗显示控制
const roleModalVisible = ref(false);

// 根据角色代码判断是否为管理员角色
const isAdminRole = computed(() => {
  return currentRole.value && (currentRole.value.code === 'admin' || currentRole.value.id === 1);
});

// 根据角色ID判断是否为管理员角色
function isAdminRoleById(roleId) {
  return roleId === 1 || roles.value.find(r => r.id === roleId)?.code === 'admin';
}

// 刷新菜单树
async function refreshMenuTree() {
  try {
    localLoading.value = true;
    
    // 重新生成菜单树
    await fetchAllMenus();
    
    // 如果有选中的角色，重新加载该角色的权限
    if (currentRole.value) {
      await handleSelectRole(currentRole.value);
    }
    
    Message.success('菜单树刷新成功');
  } catch (error) {
    console.error('刷新菜单树失败:', error);
    Message.error('刷新失败: ' + (error.message || '未知错误'));
  } finally {
    localLoading.value = false;
  }
}

// 添加角色
function handleAddRole() {
  roleForm.id = null;
  roleForm.name = '';
  roleForm.code = '';
  roleForm.status = 1;
  roleForm.description = '';
  roleForm.sort = 0;
  roleModalVisible.value = true;
}

// 编辑角色
function handleEditRole(role) {
  roleForm.id = role.id;
  roleForm.name = role.name;
  roleForm.code = role.code;
  roleForm.status = role.status;
  roleForm.description = role.description || '';
  roleForm.sort = role.sort || 0;
  roleModalVisible.value = true;
}

// 删除角色
async function handleDeleteRole(role) {
  if (isAdminRoleById(role.id)) {
    Message.warning('管理员角色不可删除');
    return;
  }
  
  try {
    const success = await roleStore.deleteRole(role.id);
    if (success) {
      Message.success('删除角色成功');
      // 重新加载角色列表
      await roleStore.getRoleList();
    }
  } catch (error) {
    Message.error('删除角色失败: ' + (error.message || '未知错误'));
  }
}

// 删除角色确认处理函数
async function handleDeleteRoleConfirm(role) {
  if (isAdminRoleById(role.id)) {
    Message.warning('管理员角色不可删除');
    return;
  }
  
  try {
    // 显示加载提示
    Message.loading('正在检查角色使用情况...', 0);
    
    // 获取用户列表并在前端筛选使用该角色的用户
    try {
      // 直接使用用户store获取用户列表
      const userStore = useUserStore();
      // 获取所有用户（这里可能需要修改参数以获取所有用户）
      await userStore.getUserList({
        current: 1,
        pageSize: 999 // 设置一个足够大的值获取所有用户
      });
      
      // 筛选使用该角色的用户
      const usersWithRole = userStore.userList.filter(user => {
        return user.role_id === role.id || 
               user.roleId === role.id || 
               String(user.role_id) === String(role.id) || 
               String(user.roleId) === String(role.id);
      });
      
      // 清除loading提示
      Message.clear();
      
      if (usersWithRole && usersWithRole.length > 0) {
        // 如果有用户使用此角色，显示警告并取消删除
        Message.warning(`无法删除该角色，有 ${usersWithRole.length} 个用户正在使用此角色`);
        return;
      }
    } catch (error) {
      console.error('检查角色使用情况出错:', error);
      // 出错时也继续尝试删除，但给出警告
      Message.warning('无法检查角色使用情况，将直接尝试删除');
    }
    
    // 执行删除操作
    const success = await roleStore.deleteRole(role.id);
    if (success) {
      Message.success('删除角色成功');
      
      // 如果删除的是当前选中的角色，清除选择
      if (currentRole.value && currentRole.value.id === role.id) {
        currentRole.value = null;
        checkedKeys.value = [];
      }
      
      // 重新加载角色列表
      await roleStore.getRoleList();
    }
  } catch (error) {
    // 清除loading提示
    Message.clear();
    console.error('删除角色出错:', error);
    
    // 显示错误信息
    Message.error('删除角色失败: ' + (error.message || '未知错误'));
  }
}

// 计算弹窗标题
const modalTitle = computed(() => roleForm.id ? '编辑角色' : '新增角色');

// 关闭角色弹窗
function closeRoleModal() {
  roleModalVisible.value = false;
}

// 提交角色表单
async function handleSubmitRole(done) {
  if (!roleForm.name) {
    Message.warning('请输入角色名称');
    done(false);
    return;
  }
  
  if (!roleForm.code) {
    Message.warning('请输入角色标识');
    done(false);
    return;
  }
  
  try {
    // 操作开始前，清除可能存在的消息
    Message.clear();
    
    let success = false;
    if (roleForm.id) {
      // 更新角色 - 不在store中显示消息
      success = await roleStore.updateRole(roleForm.id, roleForm, false);
    } else {
      // 创建角色时，为编码添加时间戳后缀，确保唯一性
      const timestamp = new Date().getTime();
      const uniqueRoleForm = {
        ...roleForm,
        code: `${roleForm.code}_${timestamp}` // 添加时间戳后缀
      };
      
      // 创建角色 - 不在store中显示消息
      success = await roleStore.createRole(uniqueRoleForm, false);
    }
    
    if (success) {
      // 在这里统一显示成功消息
      Message.success(roleForm.id ? '更新角色成功' : '创建角色成功');
      
      // 重新加载角色列表
      await roleStore.getRoleList();
      done(true);
    } else {
      done(false);
    }
  } catch (error) {
    Message.error('提交角色表单失败: ' + (error.message || '未知错误'));
    done(false);
  }
}

// 处理选择角色
const handleSelectRole = async (role) => {
  try {
    console.log('选择角色:', role);
    if (!role || !role.id) {
      Message.warning('请选择有效的角色');
      return;
    }
    
    currentRole.value = role;
    // 清空当前选中的权限，使用普通数组赋值，而不是修改value属性
    checkedKeys.value = [];
    
    // 判断是否为管理员角色
    if (isAdminRoleById(role.id)) {
      // 管理员角色拥有所有权限
      console.log('管理员角色，设置全部权限');
      // 确保menuTree.value不为空
      if (menuTree.value && menuTree.value.length > 0) {
        // 获取所有菜单的key，并转换为字符串类型
        const allKeys = getAllMenuKeys(menuTree.value).map(key => String(key));
        // 直接赋值，不要使用.value
        checkedKeys.value = allKeys;
        console.log('管理员拥有的全部权限:', checkedKeys.value);
        Message.success(`管理员角色默认拥有全部权限`);
      } else {
        console.error('菜单树为空，无法设置管理员权限');
        Message.warning('菜单数据不完整，请刷新页面重试');
      }
      return;
    }
    
    // 非管理员角色，获取权限
    console.log('准备获取角色权限，角色ID:', role.id);
    
    // 多种途径尝试获取角色权限 (目标：获取与 menuTree key 匹配的字符串 key 列表)
    let permissionIds = []; // 存储原始的数字ID或字符串ID
    let errorMsg = null;
    let source = '未知'; // 记录权限来源
    
    // 1. 首先尝试从角色详情获取权限
    try {
      console.log('尝试从角色详情获取权限...');
      const roleDetail = await roleStore.getRoleDetail(role.id);
      if (roleDetail && roleDetail.data) {
        let tempPerms = [];
        if (Array.isArray(roleDetail.data.permissions)) {
          tempPerms = roleDetail.data.permissions;
        } else if (roleDetail.data.permissions && Array.isArray(roleDetail.data.permissions.list)) {
          tempPerms = roleDetail.data.permissions.list;
        } else if (Array.isArray(roleDetail.data.menuIds)) {
          tempPerms = roleDetail.data.menuIds;
        } else if (Array.isArray(roleDetail.data.menu_keys)) { // 假设后端也可能返回 menu_keys
          tempPerms = roleDetail.data.menu_keys;
        }
        
        if (tempPerms.length > 0) {
          permissionIds = tempPerms; // 直接存储获取到的ID列表
          source = '角色详情';
          console.log('从角色详情获取到原始权限ID:', permissionIds);
        }
      }
    } catch (error) {
      console.warn('从角色详情获取权限失败:', error);
      errorMsg = error.message;
    }
    
    // 2. 如果角色详情未获取到权限，尝试从权限store获取
    if (permissionIds.length === 0) {
      try {
        console.log('尝试从permissionStore获取权限...');
        if (typeof permissionStore.getRolePermissions === 'function') {
          const permissionsData = await permissionStore.getRolePermissions(role.id);
          if (Array.isArray(permissionsData) && permissionsData.length > 0) {
            permissionIds = permissionsData; // 直接存储获取到的ID列表
            source = '权限Store';
            console.log('从permissionStore获取到原始权限ID:', permissionIds);
          }
        } else {
          console.warn('permissionStore.getRolePermissions方法不存在');
        }
      } catch (error) {
        console.warn('从permissionStore获取权限失败:', error);
        errorMsg = errorMsg || error.message;
      }
    }
    
    // 3. 如果以上方法都失败，使用模拟数据作为最后手段
    // 注意：模拟数据现在应该提供字符串 Key，因为我们没有 ID 到 Key 的完整映射
    if (permissionIds.length === 0) {
      console.warn('所有API尝试都失败，使用模拟数据');
      source = '模拟数据';
      
      let mockKeys = [];
      if (role.id === 2 || role.code === 'employee') {
        mockKeys = [
          'Dashboard', 'Workbench', 'Report',
          'Inventory', 'InventoryQuery', 'InventoryAlerts', 'InventoryCount',
          'Inbound', 'InboundOrderList',
          'Outbound', 'OutboundOrderList',
          'About', 'SystemInfo', 'SystemLog' 
        ];
        console.log('使用模拟的员工权限数据 (字符串Key):', mockKeys);
      } else {
        console.log(`角色 ${role.name} (ID: ${role.id}) 无模拟权限数据`);
      }
      // 如果是模拟数据，直接使用 Key
      checkedKeys.value = mockKeys;
      Message.success(`已加载 ${role.name} 的权限配置 (来源: ${source})，共 ${mockKeys.length} 个权限`);
      return; // 模拟数据处理完毕，直接返回
    }
    
    // 4. 将获取到的 permissionIds (数字或字符串ID) 映射为字符串 Key
    const finalPermissionKeys = permissionIds.map(id => {
      const key = idToKeyMap.value.get(id) || idToKeyMap.value.get(String(id));
      // 移除警告：我们已知 26 和 27 会映射失败，这是符合预期的
      // if (!key) {
      //   console.warn(`权限ID "${id}" 无法在菜单树中找到对应的Key，将被忽略。请检查fetchAllMenus中的ID配置。`);
      // }
      return key || null; // 如果找不到Key，返回null
    }).filter(key => key !== null);

    console.log(`最终设置的权限Key (来源: ${source}, 映射自ID):`, finalPermissionKeys);

    // 设置权限到选中状态
    checkedKeys.value = finalPermissionKeys;

    // 提示用户
    Message.success(`已加载 ${role.name} 的权限配置 (来源: ${source})，共 ${finalPermissionKeys.length} 个权限`);

  } catch (error) {
    console.error('处理选择角色时出错:', error);
    Message.error('获取角色权限时发生错误: ' + (error.message || '未知错误'));
    checkedKeys.value = [];
  }
};

// 处理自定义树的勾选变化
const handleCustomCheck = (key, checked) => {
  console.log(`自定义复选框变化: key=${key}, checked=${checked}`);
  const currentCheckedKeys = new Set(checkedKeys.value);

  const { node } = findNodeAndParents(menuTree.value, key);
  if (!node) {
    console.error('无法在菜单树中找到 key:', key);
    return;
  }

  if (checked) {
    // --- 勾选操作 ---
    // 1. 勾选当前节点
    currentCheckedKeys.add(node.key);
    
    // 2. 自动勾选所有父节点
    const { parents } = findNodeAndParents(menuTree.value, key);
    parents.forEach(parent => currentCheckedKeys.add(parent.key));
    console.log('勾选父节点:', parents.map(p => p.key));

  } else {
    // --- 取消勾选操作 ---
    // 1. 取消勾选当前节点及其所有子节点
    const keysToRemove = getNodeAndDescendantKeys(node);
    keysToRemove.forEach(k => currentCheckedKeys.delete(k));
    console.log('取消勾选节点及其子节点:', keysToRemove);
    
    // 2. 不自动取消父节点 (父节点状态由其剩余子节点决定，但此简化逻辑下父节点保持勾选)
  }
  
  // 更新 checkedKeys (触发响应式更新)
  checkedKeys.value = Array.from(currentCheckedKeys);
  console.log('更新后的 checkedKeys:', checkedKeys.value);
};

// 保存角色权限
const handleSavePermissions = async () => {
  // 检查是否已选择角色
  if (!currentRole.value) {
    Message.warning('请先选择一个角色');
    return;
  }

  // 检查角色是否为admin，admin角色不可修改权限
  const isAdmin = roles.value.find(r => r.id === currentRole.value.id)?.code === 'admin';
  if (isAdmin) {
    Message.warning('管理员角色默认拥有全部权限，无需修改');
    return;
  }

  try {
    console.log('保存角色权限:', currentRole.value.id);
    console.log('选中的权限 Key:', checkedKeys.value);

    // 将选中的字符串 Key 数组转换回数字 ID 数组
    const permissionIdsToSave = checkedKeys.value.map(key => {
      const id = keyToIdMap.value.get(key);
      if (id === undefined) {
        console.warn(`无法将 Key "${key}" 转换回 ID，将忽略此权限。请检查映射。`);
        return null;
      }
      return id;
    }).filter(id => id !== null);

    console.log('转换后待保存的权限 ID:', permissionIdsToSave);

    // 使用loading显示保存中状态
    localLoading.value = true;
    Message.loading('正在保存权限配置...', 0);

    // 使用store来更新权限，传递转换后的数字 ID 数组
    const success = await permissionStore.updateRolePermissions(
      currentRole.value.id, 
      permissionIdsToSave // 使用转换后的数字 ID
    );
    
    // 清除loading消息
    Message.clear();
    
    if (success) {
      Message.success('权限配置保存成功');
      
      // 强制刷新菜单树
      await fetchAllMenus();
      
      // 延迟一会儿确保后端数据已更新
      setTimeout(async () => {
        // 强制重新获取角色权限，确保显示最新权限
        await handleSelectRole(currentRole.value);
      }, 500);
    }
  } catch (error) {
    Message.clear();
    console.error('保存权限出错:', error);
    Message.error('保存权限失败: ' + (error.message || '未知错误'));
  } finally {
    localLoading.value = false;
  }
};

// 初始化
onMounted(async () => {
  try {
    // 显示加载状态
    localLoading.value = true;
    
    // 并行加载数据
    await Promise.all([
      fetchAllMenus(),
      roleStore.getRoleList()
    ]);
    
    console.log('初始化数据完成:', {
      menus: menuTree.value.length,
      roles: roles.value.length
    });
    
    // 不再自动选择第一个角色
    Message.success('角色配置页面初始化成功');
    if (roles.value.length === 0) {
      Message.info('暂无角色数据，请先创建角色');
    }
  } catch (error) {
    console.error('初始化错误:', error);
    Message.error('初始化失败: ' + (error.message || '未知错误'));
  } finally {
    // 隐藏加载状态
    localLoading.value = false;
  }
});

// 监听选中键的变化，用于调试
watch(checkedKeys, (newVal) => {
  console.log('选中的键已变更为:', newVal);
}, { deep: true });
</script>

<style lang="less" scoped>
.container {
  padding: 0 20px 20px 20px;
}

.cards-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.general-card {
  margin-top: 16px;

  :deep(.arco-card-header) {
    height: 52px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
  }
}

.general-card:first-child {
  flex: 4 !important;
}

.general-card:last-child {
  flex: 6 !important;
}

.role-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.role-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-name {
  font-weight: 500;
  margin-right: 8px;
}

.role-actions {
  display: flex;
  gap: 4px;
}

.role-list {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

:deep(.arco-list-item) {
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 4px;
  padding: 12px 16px;
  transition: all 0.2s;

  &:hover {
    background-color: var(--color-fill-2);
  }

  &.active-role {
    background-color: var(--color-fill-2);
    font-weight: 500;
  }
}

.empty-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
}

.permissions-container {
  .permission-alert {
    margin-bottom: 16px;
  }

  .menu-tree-container {
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    min-height: 500px;
    max-height: calc(100vh - 180px);
    overflow: auto;
    
    :deep(.arco-tree) {
      .arco-tree-node {
        margin: 4px 0;
        
        .arco-tree-node-title {
          font-weight: normal;
          padding: 6px 8px;
          border-radius: 4px;
          
          &:hover {
            background-color: var(--color-fill-2);
          }
        }
        
        &.arco-tree-node-selected {
          > .arco-tree-node-title {
            background-color: var(--color-primary-light-1);
            color: var(--color-primary);
          }
        }
      }
      
      .arco-checkbox {
        margin-right: 8px;
      }
    }
  }
}

.custom-menu-tree {
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  min-height: 500px;
  max-height: calc(100vh - 180px);
  overflow: auto;
  
  .menu-item {
    margin-bottom: 8px;
    
    &.parent-menu {
      margin-bottom: 16px;
    }
    
    .menu-row {
      display: flex;
      align-items: center;
      padding: 8px;
      border-radius: 4px;
      
      &:hover {
        background-color: var(--color-fill-2);
      }
    }
  }
  
  .submenu-container {
    margin-left: 24px;
    margin-top: 8px;
    border-left: 1px solid var(--color-border);
    padding-left: 16px;
    
    .child-menu {
      margin-bottom: 8px;
    }
  }
}

:deep(.arco-form-item-label-col) {
  font-weight: 500;
}
</style> 